import React from 'react';
import {connect} from 'react-redux';
import styles from './Index.css';
import Nav from './Nav/Nav';
import Side from './Side/Side';
import ReactTooltip from 'react-tooltip';
import {Scrollbars} from 'react-custom-scrollbars';
import VideoPlayer  from './VideoPlayer/VideoPlayer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import darkBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import {IMG_URL} from '../../utils/constants'
import {getcookie} from '../../utils/cookies'
import Footer from '../Home/Footer';
import '../Home/less/antMotion_style.less';
const muiTheme = {
  palette: {
    primary1Color: '#6441a4',
    primary2Color: '#6441a4',
  }
};


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      targetVideoId: false,
      targetVideoPlay: false,//默认直播视频隐藏
      isUserLogined: true,//，默认用户登录了，方便展示其他课程
    }
  };

  chooseOneTab = (tabClickPayloadData) => {
    this.setState({
      index: tabClickPayloadData.newIndex,
      targetVideoPlay: false,//不播放视频
    });
    // console.log(tabClickPayloadData);
    let dispatch = this.props.dispatch;
    if (tabClickPayloadData.menuName == '我的课程') {
      // 从cookie拿到unioinid，如果没有就提示用户登录
      let unionid = getcookie('unionid');
      if (unionid) {
        this.setState({
          isUserLogined: true //用户登录了改变提示状态
        });
        dispatch({type: 'user/fetchMyClass', payload: unionid})
      } else {

        this.setState({
          isUserLogined: false //用户没有登录，继续提示，不展示任何视频列表
        });
      }
    } else {
      this.setState({
        isUserLogined: true //用户离开我的课程，继续展示展示其他视频列表
      });
      let values = this.props.menu.filter(item => item.pri == tabClickPayloadData.newIndex)[0];
      dispatch({type: 'user/fetchOneGroupInfo', payload: values.id})
    }

  };
  componentWillMount(){
    let unionid = getcookie("unionid")


    if (unionid != null && unionid != '' && unionid != undefined) {

    } else {
      window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

    }
  }

  componentWillReceiveProps(props) {
    let classInfo = props.classInfo;
    //获取到一个tab下的所有课程列表之后，增加一个属性判断其是否显示文字提示，默认不显示
    classInfo.map(item => item.isShowMask = false);
    this.setState({
      classInfo: classInfo
    })
  }

  render() {
    // console.log(this);
    let {dispatch} = this.props;
    //展示点击tab获取到的视频列表
    let videoList = this.props.classInfo.map((item) => {
      return <div id={item.id}
                  className={styles.video}
                  onMouseOver={(e) => {
                    let targetId = e.target.id;
                    let {classInfo} = this.state;
                    classInfo.map(item => {
                      item.id == targetId ? item.isShowMask = true : false
                    });
                    this.setState({
                      isShowMask: true,
                      classInfo
                    })
                  }}
                  onMouseOut={(e) => {
                    let targetId = e.target.id;
                    let {classInfo} = this.state;
                    classInfo.map(item => {
                      item.id == targetId ? item.isShowMask = false : true
                    });
                    this.setState({
                      isShowMask: false,
                      classInfo
                    })
                  }}
                  onClick={() => {
                    //点击获取该课程的直播链接
                    dispatch({type: 'user/fetchLiveVideo', payload: item.courseClass.classId})
                    this.setState({
                      targetVideoPlay: true,//播放识破，出现播放舞台
                    })

                  }}>
        <div className={styles.videoPic}>
          <img src={ IMG_URL + '/' + item.classPicName} id={item.id} style={{width: '100%'}}/>
          <div className={styles.textMaskForPic} style={{display: item.isShowMask ? '' : 'none'}}>
            <div>
              购买该课程
            </div>
            <div>
              请使用小程序：【环球云逸】
            </div>
          </div>
        </div>
        <div className={styles.briefIntro}>
          <div className={styles.briefIntro_part1}>{item.courseClass.className}</div>
          <div className={styles.briefIntro_part2}>￥ {item.courseClass.commonCash}</div>
          <div className={styles.briefIntro_part3}>
            <div className={styles.briefIntro_part3_item1}>
              <img src=''/>
              <div>{item.courseClass.commonYcoin}</div>
            </div>

            <div className={styles.briefIntro_part3_item2}>{item.courseClass.commonYcoin}人已购买</div>
          </div>
        </div>
      </div>
    });
    //提示用户没有登录
    let sweetTips = <div className={styles.sweetTips}>
      <img src={require('../../assets/default_bg_login.png')}/>
      <div>您还没有登录呢，点击左下角用微信登录吧</div>
    </div>
    return (
      <div>
        <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme, muiTheme)}>
          <div className={styles.container}>
            {/*侧边栏*/}
            <Side {...this.props}/>
            {/*内容区*/}
            <div className={styles.scrollContainer}>
              <Nav {...this.props} callbackParent={this.chooseOneTab}/>
              <Scrollbars>
                <div className={styles.wrapperContainer}>
                  {/*style={{display: this.state.targetVideoPlay ? '' : 'none'}}*/}
                  <div className={styles.mainContainer} >
                    <VideoPlayer {...this.props}/>
                  </div>
                  <div className={styles.mainContainer}>
                    {this.state.isUserLogined ? videoList : sweetTips}
                  </div>
                </div>
                <div className={styles.footer}>
                  <Footer id="footer_1_0" key="footer_1_0" isMode={true} className="footer1"/>
                </div>
              </Scrollbars>
            </div>
          </div>
        </MuiThemeProvider>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  menu: state.user.menu,
  classInfo: state.user.classInfo,
  oneClassInfo: state.user.oneClassInfo,
  loading: state.loading.models.user,
});


export default connect(mapStateToProps)(App);
